<template>
  <div class="storyboard">
    <div class="storyboard-header">
      <h2>分镜管理</h2>
      <div class="storyboard-actions">
        <el-button type="primary" @click="addScene">添加分镜</el-button>
        <el-button @click="generateStoryboard">AI 生成分镜</el-button>
      </div>
    </div>
    
    <div class="storyboard-content">
      <div class="scene-list">
        <div v-for="(scene, index) in scenes" :key="index" class="scene-card">
          <div class="scene-number">场景 {{ index + 1 }}</div>
          <div class="scene-preview">
            <div class="preview-placeholder">场景预览</div>
          </div>
          <div class="scene-info">
            <el-input v-model="scene.description" type="textarea" :rows="3" placeholder="场景描述" />
            <div class="scene-meta">
              <el-select v-model="scene.type" placeholder="镜头类型" size="small">
                <el-option label="特写" value="close-up" />
                <el-option label="中景" value="medium" />
                <el-option label="远景" value="long" />
              </el-select>
              <el-select v-model="scene.angle" placeholder="拍摄角度" size="small">
                <el-option label="平视" value="eye-level" />
                <el-option label="俯视" value="high-angle" />
                <el-option label="仰视" value="low-angle" />
              </el-select>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue'
import { ElMessage } from 'element-plus'

const emit = defineEmits(['update:scenes'])

const scenes = ref([
  {
    description: '开场场景，展示城市全景',
    type: 'long',
    angle: 'high-angle'
  }
])

const addScene = () => {
  scenes.value.push({
    description: '',
    type: '',
    angle: ''
  })
  emit('update:scenes', scenes.value)
}

const generateStoryboard = () => {
  ElMessage.info('AI 正在生成分镜...')
}
</script>

<style scoped>
.storyboard {
  height: 100%;
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.storyboard-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px;
  background: #fff;
  border-radius: 8px;
}

.storyboard-content {
  flex: 1;
  background: #fff;
  border-radius: 8px;
  padding: 24px;
  overflow-y: auto;
}

.scene-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 24px;
}

.scene-card {
  border: 1px solid #e4e7ed;
  border-radius: 8px;
  overflow: hidden;
}

.scene-number {
  padding: 8px;
  background: #f5f7fa;
  border-bottom: 1px solid #e4e7ed;
  text-align: center;
}

.scene-preview {
  height: 200px;
  background: #f5f7fa;
  display: flex;
  align-items: center;
  justify-content: center;
}

.scene-info {
  padding: 16px;
}

.scene-meta {
  display: flex;
  gap: 12px;
  margin-top: 12px;
}
</style> 